<template>
  <div class="content_page">
    <div class="group_tab">
      <div>
        <up-tabs
        :list="arrList"
        lineWidth="30"
        lineColor="#006D56"
        :activeStyle="{
          color: '#006D56',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
          fontSize: globalFont === 'small_font' ? '28rpx' : globalFont === 'small-medium' ? '32rpx' : '40rpx',
        }"
        :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
          fontSize: globalFont === 'small_font' ? '28rpx' : globalFont === 'small-medium' ? '32rpx' : '40rpx',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
        @click="chooseGroup"
      >
      </up-tabs>
    </div>
    <div class="line"></div>
    <div>
      <div class="tab_list" v-if="tabList.length">
        <div  v-for="(i, k) in tabList" :key="k" :class="['tab_item', globalFont]">
          <div class="title">
            <!-- {{ i.equipmentName }}&nbsp;&nbsp;&nbsp;({{ i.shareNum }}人) -->
              <div class="name">{{ i.equipmentName }}</div>
              <div>({{ i.shareNum }}人)</div>
          </div>
          <div class="icon">
            <image
              src="/static/myInfo/management_icon_move.png"
              @click="removegroup(i.equipmentId)"
            >
            </image>
            <image
              src="/static/myInfo/management_icon_details.png"
              @click="toDetail(i.equipmentId)"
            >
            </image>
          </div>
        </div>
      </div>
      <div v-else class="empty-box">
        <image src="/src/static/home/img_None.png"></image>
        <div class="title" :class="['title', globalFont]">暂无数据</div>
      </div>
    </div>
      </div>

    <div class="editSort" v-if="groupName !== '全部'" :class="['editSort', globalFont]">
      <div class="delete" @click="deleteFn">删除</div>
      <div class="edit" @click="editSortList">编辑</div>
    </div>
  </div>
  <!-- 移动分组 -->
  <up-popup :show="shoeModal" z-index="999999999" mode="bottom" :round="16">
    <view class="title addtitle">
      <div style="width: 40rpx"></div>
      <text>移动分组</text>
      <image src="/static/home/close.png" @click="shoeModal = false"></image>
    </view>
    <view class="part borderLine mt114">
      <up-picker
        :show="shoeModal"
        :columns="[sortList]"
        keyName="groupName"
        @change="changeHandle"
      ></up-picker>
      <view class="modalBtn">
        <view class="btn" @click="confirm">确认</view>
      </view>
    </view>
  </up-popup>
  <div class="editModal">
    <up-modal
      :show="showEditModal"
      title="编辑分组"
      showCancelButton="true"
      @confirm="confirmChange"
      @cancel="showEditModal = false"
    >
      <view class="slot-content">
        <up-input
          placeholder="请输入分组"
          border="bottom"
          v-model="deviceName"
          input-align="left"
          style="width: 100%"
        ></up-input>
      </view>
    </up-modal>
  </div>
  <div class="delModal">
    <up-modal
      :show="showDeleteModal"
      title="提示"
      content="您确定要删除分组吗"
      @confirm="confirmDelete"
      showCancelButton="true"
      @cancel="showDeleteModal = false"
    ></up-modal>
    <!-- 编辑分类 -->
  </div>
</template>
<script lang="ts" setup>
import { ref,getCurrentInstance} from "vue";
import { onLoad,onShow } from "@dcloudio/uni-app";
import type { DeviceSortType } from "@/api/index/type.ts";
import type { devicelistType } from "@/api/myInfo/type.ts";
import { deviceList, removeSortFn,addeditGroupFn,deleteGroupFn} from "@/api/myInfo/myInfo.ts";
import { deviceSortFn } from "@/api/index/index.ts";
import { isElementAccessExpression } from "typescript";
// 分类数据
const sortList = ref<DeviceSortType[]>([]);
const groupId = ref("");
const groupName = ref("");
const arrList = ref<{ id: string; name: string }[]>([]);
let submitForm = {
  equipmentId: "",
  groupId: "",
};
const getSortList = () => {
  deviceSortFn()
    .then((res: any) => {
      if (res.resultStatus) {
        sortList.value = res.resultData;
        arrList.value = sortList.value.map((f: any) => {
          return {
            id: f.groupId,
            name: f.groupName,
          };
        });
        arrList.value.unshift({
          id: "",
          name: "全部",
        });
        groupId.value = arrList.value[0].id;
        groupName.value = arrList.value[0].name;
        submitForm.groupId = arrList.value[0].id;
        getDataList();
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    });
};
// 获取列表
const tabList = ref<devicelistType[]>([]);
const getDataList = () => {
  deviceList({
    groupId: groupId.value,
  })
    .then((res: any) => {
      if (res.resultStatus) {
        tabList.value = res.resultData;
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    });
};
const chooseGroup = (e: any) => {
  groupName.value = e.name;
  console.log(groupName.value);
  deviceName.value = groupName.value
  groupId.value = e.id;
  getDataList();
};
// 移动分组
const shoeModal = ref<boolean>(false);
const removegroup = (i: any) => {
  shoeModal.value = true;
  submitForm.equipmentId = i;
};
const changeHandle = (e: any) => {
  submitForm.groupId = e.value[0].groupId;
};
const confirm = () => {
  removeSortFn({
    equipmentId: submitForm.equipmentId,
    groupId: submitForm.groupId,
  })
    .then((res: any) => {
      if (res.resultStatus) {
        uni.showToast({
          title: "移动分组成功",
        });
        getDataList();
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    })
    .finally(() => {
      shoeModal.value = false;
    });
};
// 跳转详情页
const toDetail = (id: any) => {
  uni.navigateTo({
    url: `/pages/toTab/equipment/qeuimpentdetail?equipmentId=${id}`,
  });
};
// 编辑删除分组
const showEditModal = ref(false);
const deviceName = ref("");
const editSortList = () => {
  showEditModal.value = true
}
const confirmChange = () => {
  console.log(groupId.value,deviceName.value);
  addeditGroupFn(groupId.value, {
    groupName: deviceName.value,
  }).then((res) => {
    if (res.resultStatus) { 
      uni.showToast({
        title: "修改成功",
      });
      getSortList();
      showEditModal.value = false
    } else {
      uni.showToast({
        title: res.errorMessage,
        icon: "none",
      });
    
    }
  })
};
const showDeleteModal = ref(false)
const deleteFn = () => {
  showDeleteModal.value  = true
}
const confirmDelete = () => {
  deleteGroupFn(groupId.value).then((res) => { 
    if (res.resultStatus) {
      uni.showToast({
        title: "删除成功",
        icon:'none'
      });
      getSortList();
      showDeleteModal.value = false
    } else {
      uni.showToast({
        title: res.errorMessage,
        icon:'none'
      });
    }
  }).catch((err) => {
    uni.showToast({
        title: "服务器异常",
        icon:'none'
      });
  })
}
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const globalFont = ref()
onLoad(() => {
  const userInfo_key = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.smallFont
  // getSortList();
});
onShow(() => {
  getSortList();
});
</script>
<style lang="scss" scoped>
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
    /* 大号字号 */
  --font-size-large: 40rpx;
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}
.content_page {
  height: calc(100vh - 30rpx);
  background: #f5f6f7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .line {
    width: 100%;
    height: 2rpx;
    background-color: #eeeeee;
    margin-top: -4rpx;
  }

  .group_tab {
    padding: 32rpx;
    padding-bottom: 0;
    background-color: #fff;

    .tab_item {
      // margin-right: 70rpx;//
      color: #333;
      position: relative;
    }

    .activeTab {
      font-weight: bold;
      color: #006d56;
    }
  }

  .tab_list {
    // padding: 0 32rpx;
    background-color: #fff;
 
    .tab_item {
      padding: 32rpx 0;
      border-bottom: 2rpx solid #eeeeee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // font-size: 32rpx;
      color: #333;
      .title{
        display: flex;
        justify-content: space-between;
        .name{
          flex: 1;
         word-break: break-all;
        }
      }
      .icon {
        width: 170rpx;
        image {
          width: 48rpx;
          height: 48rpx;
          margin-left: 32rpx;
        }
      }
    }
  }
}
.editSort {
  margin-bottom: 180rpx;
  line-height: 60rpx;
  // font-size: 17px;
  display: flex;
  justify-content: space-around;
  .edit {
    width: 130px;
    height: 70rpx;
    border: 1px solid #006D56;
    line-height: 70rpx;
    border-radius: 8px;
    text-align: center;
    color: #006D56;
  }
  .delete {
    width: 130px;
    height: 70rpx;
    line-height: 70rpx;
    border: 1px solid gray;
    border-radius: 8px;
    text-align: center;
  }
}
.empty-box {
  background: #f8f8f8;
  // padding: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;


  image {
    width: 150rpx;
    height: 150rpx;
    margin-bottom: 40rpx;
    margin-top: 160rpx;
  }

  .title {
    // font-size: 32rpx;
    color: #999999;
    font-weight: bold;
  }
}
</style>
